<template>
  <view class="reviews-page">
    <!-- 自定义导航栏 -->
    <custom-navbar title="评价管理"></custom-navbar>
    
    <!-- 评价列表 -->
    <view class="reviews-list">
      <view 
        class="review-item" 
        v-for="review in reviews" 
        :key="review.id"
        @click="viewReviewDetail(review.id)"
      >
        <view class="review-header">
          <text class="customer-name">{{ review.customerName }}</text>
          <view class="detail-btn" @click.stop="viewReviewDetail(review.id)">
            查看详情
          </view>
        </view>
		
		<view class="divider"></view>
		
		
        
        <view class="review-info">
          <view class="order-info">
            <text class="label" >订单编号:</text>
            <text class="value">{{ review.orderNo }}</text>
          </view>
          <view class="rating-info">
            <text class="label">综合评分:</text>
            <text class="value">{{ review.rating }}分</text>
            <text class="stars">{{ getStars(review.rating) }}</text>
          </view>
          <view class="time-info">
            <text class="label">评价时间:</text>
            <text class="value">{{ review.createTime }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {
    'custom-navbar': () => import('@/components/custom-navbar.vue')
  },
  data() {
    return {
      reviews: [
        {
          id: 1,
          customerName: '张女士',
          rating: 3,
          orderNo: '2021010831213',
          createTime: '2023-03-12 11:02'
        },
        {
          id: 2,
          customerName: '张女士',
          rating: 3,
          orderNo: '2021010831213',
          createTime: '2023-03-12 11:02'
        }
      ]
    }
  },
  onLoad() {
    // 页面加载
  },
  methods: {
    getStars(rating) {
      let stars = '';
      for (let i = 1; i <= 5; i++) {
        if (i <= rating) {
          stars += '★';
        } else {
          stars += '☆';
        }
      }
      return stars;
    },
    
    
    viewReviewDetail(id) {
      // 跳转到已完成订单评价页面，传递评价ID
      uni.navigateTo({
        url: `/pages/reviews/completed?reviewId=${id}`
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.reviews-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 120rpx;
  padding-top: calc(env(safe-area-inset-top) + 88rpx);
  height: 600px;
  background-image: linear-gradient(
    to bottom,
    #2f81fa 0%, #2f81fa 20%,
    #f7f7f7 20%, #f7f7f7 100% 
  );
  background-repeat: no-repeat;
}

/* 评价列表 */
.reviews-list {
  padding: 20rpx;
  background-color: transparent;
}

.review-item {
  background-color: #ffffff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.06);
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.divider {
			height: 7rpx;
			background: #f0f0f0;
			margin-bottom: 16rpx;
		}

.customer-name {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.detail-btn {
  background-color: #007AFF;
  color: #ffffff;
  border: none;
  border-radius: 20rpx;
  padding: 12rpx 24rpx;
  font-size: 24rpx;
  text-align: center;
}

.review-info {
  display: flex;
  flex-direction: column;
  gap: 12rpx;
}

.order-info,
.rating-info,
.time-info {
  font-size: 24rpx;
  line-height: 1.4;
  display: flex;
  align-items: center;
}

.label {
  color: #999999;
}

.value {
  color: #007AFF;
  margin-left: 8rpx;
}

/* 订单编号样式 */
.order-info .label,
.order-info .value {
  color: #007AFF;
}

/* 综合评分样式 */
.rating-info .label,
.rating-info .value {
  color: #333333;
}

/* 评价时间样式 */
.time-info .label,
.time-info .value {
  color: #999999;
}

.stars {
  color: #ffd700;
  margin-left: 8rpx;
}

</style>






